<template>

<page-view id="nav">
 
     <router-view v-slot="{Component}"> 
       <transition :name="animation">
        <keep-alive>
          <component :is="Component"></component>
        </keep-alive>
       </transition>
     </router-view>

        <div class="footer">
          <router-link to="/main/menu">
              <div class="iconfont icon-diancan"></div>
              <h3>点餐</h3>
            </router-link> 
            <router-link to="/main/order">
              <div class="iconfont icon-order"></div>
              <h3>订单</h3>
            </router-link> 
            <router-link to="/main/category">
              <div class="iconfont icon-icon04"></div>
              <h3>分类</h3>
            </router-link> 
            <router-link to="/main/user">
              <div class="iconfont icon-user"></div>
              <h3>我的</h3>
            </router-link> 

        </div>
    
    

</page-view>
</template>

<script>
import {ref, watch} from 'vue'
import { useRoute } from 'vue-router'
import PageView from '../components/PageView.vue'
export default{
  components: { PageView },
name:'App',
setup(){
  let animation=ref('slide')
  const route=useRoute()
  let routeIndex=route.meta.index
  watch(()=>route.meta.index,()=>{
    animation.value= route.meta.index<routeIndex?'slide-right':'slide-left'
     routeIndex=route.meta.index
  })


document.addEventListener("contextmenu",(e)=>{
  e.preventDefault()
})

  return {animation}

}

}

</script>

<style lang="scss">
.main{
  width:100vw ;
  height: 100vh;
  overflow: hidden;

  .footer{
    
    padding: 8px 0px;
    text-align: center;
    width: 100%;
    border-top: 1px solid gray;
    background-color: gainsboro;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index:20;
    display: flex;
    justify-content: space-around;
    h3{
      font-size: 16px;
    }
   
  }
}

//向左
.slide-left-enter-from{
  transform: translateX(100%);
}

.slide-left-enter-to,.slide-left-leave-from,.slide-left-leave-to{
  transform: translateX(0%);
}

.slide-left-enter-active,.slide-left-leave-active{
  transition: all 200ms linear;
  position: fixed;
}
//向右
.slide-right-enter-from{
  transform: translateX(-100%);
}
.slide-right-enter-to,.slide-right-leave-from,.slide-right-leave-to{
  transform: translateX(0%);
}

.slide-right-enter-active,.slide-right-leave-active{
  transition: all 200ms linear;
  position: fixed;
}

#app {
  width:100vw ;
  height: 100vh;
  overflow: hidden;
}

#nav {
  a {
    color: #2c3e50;
    &.router-link-exact-active {
      color: #ee87a9;
    }
  }
}
</style>

